/* FORMS */

@import "mixins";

.bs-component {

    /*css tabs "cerca per campi", "cera per nome"*/
    ul#search_tabs {
      border: none;
      margin: 0 auto;
      margin-bottom: 15px;
      
      width: 300px;
      @media (max-width: 460px) {width: 290px;}

      li {
        float:left;
        width: 50%;

        a {
          background: none;
          color: #fff;
          font-size: 15px;
          padding:10px 5px 5px 5px !important;
          text-align: center;
        }

      }
      li.active, li.active:hover {border-bottom: 3px solid #fff;}
      li.active > a {border: none;}
      li:hover {border:none;}
      li > a:hover {border:none;}
    }
    /*fine css tabs*/

  
  /*css form*/
   #search_fields {
      
        form {width: 100%;text-align: center;}
        input {border-radius:0px;height:42px;}

        #search_nome {
           
            span.twitter-typeahead {
                display: inline !important;
                @media (max-width: 460px) {width: 100%;}
                .keyword {
                  top: inherit !important;
                  .align-elem;

                  width: 310px;
                  border-right: 2px solid #c7c7c7;
                  margin-right: -4px;
                  border-radius: 3px 0 0 3px;

                  @media (max-width: 460px) { 
                    width: 100%;
                    margin-right: 0;
                  }
                }

            }


            .search_value {

                .align-elem;

                width: 100px;
                
                @media (max-width: 460px) { 
                  width: 100%;
                }

                input {
                  width: 100%;
                  color: #fff;
                  background: #3ec8ba;
                  border:none;
                  border-radius: 0 3px 3px 0;
                }
            }
        }
        


        #search_campi {

            .search_value {

                .align-elem;
                width: 100px;
                
                @media (max-width: 460px) {
                  width: 100%;
                }
                input {
                  width: 100%;
                  color: #fff;
                  background: #3ec8ba;
                  border: none;
                  border-radius: 0 3px 3px 0;
                }
            }

            .select_opt {

              .align-elem;
          
              width: 200px;
              border-right: 1px solid #c7c7c7;
              margin-right: -4px;

              @media (max-width: 460px) {width: 100%;}

              .dropdown-menu li a span.text {display: block; text-align: left; color: #5e5e5d;}
              .open .dropdown-toggle.btn-default {color: #5e5e5d;}

              @media (max-width: 460px) {
                width: 50%;
                float: left;
                margin-right: 0;
              }

              .bootstrap-select {
                  @media (max-width: 460px) {
                  width: 100%;
                  }
              }

              button {
                border-radius: 0;
                padding: 10px 21px;
                span {color: #5e5e5d;}
                border-radius: 3px 0 0 3px;
              }


            }

            h3 { @media (max-width: 460px) {display: none; }

          } 
        }

      }
      /*fine css form*/

}



div#search-loading {
  margin: 0 auto;
  width: 100%;
  display: block;
  text-align: center;
}

/*LIVE SEARCH HOME RESULTS*/
.tt-dropdown-menu {
     width: 300px;
     padding: 8px 0;
     background-color: rgba(255,255,255,.9);
     color: black;
     
     max-height: 150px;
     overflow-y: auto;
}

.tt-dropdown-menu strong{
    color: #e88a19;
}

.tt-dropdown-menu p{
    border-bottom: 1px solid #ccc;
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 160%;
  line-height: 120%;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 88px;
}


/* Selectpicker */
ul.dropdown-menu.inner.selectpicker {
  li {
    margin: 0 !important;
    padding: 0 !important;
  }
}


span.wpuf-help{
  display: block;
}

/*
 Buy Section
 */ 
#buy {
    margin-top: 50px;
    h1,h2 {
      font-family: @font-default;
      font-size: 36px;
      font-weight: 700;
    }
    h1 {
      text-align: center;
      color: #1da3a8; 
      margin-bottom: 30px;
    }
    h2 {
      color: #686868;
    }

    input,
    select{
      width: 90% !important;
      padding: 7px !important;
      -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
      border-radius: 4px;
    }

    
    .coords input {
      width: 70% !important;
    }

    .btn-group {
      width: 100%;
        .btn-default {
            width: 40% !important;
        }
        
        
        button.selectpicker {
          width: 90% !important;
        }
        
    }

    button.wpuf-button.button {
      height: 32px;
      background: #468ba0 !important;
      border-radius: 4px;
    }

    @media (max-width: 460px) { 
        input,
        select,
        .btn-default {
            width: 40% !important;
        }
    }
    
    #traipler-features{
        font-size: 130%;
        padding-left: 20px;
        
        #traipler-cost{
          margin-top: 20px;
          text-align: center; 
          font-size: 180%;
          .price{
            color: @orange;
            }
            
            .total{
              border-bottom: 2px solid @blue;
              
              .price{
                 font-size: 150%;
              font-weight: bold;
              }
              
          }
          
        }
        
      
        
        
        
    }
    
    
    //Messagi conferma ordine
    .wpuf-success{
      padding: 25px;
      font-size: 170%;
    }
    
    
    ul{
      list-style: inherit;
      margin-top: 20px;
      padding-left: 15px;
    }
}


//Testo barrato per il prezzo
.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 4px solid ;
  border-color: fadeOut(@blue,20%);
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

/*end buy section*/